<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>app活动</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="/yao/statics/css/style.css" />
		
		<script src="/yao/statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body><!--头部标题和返回按钮-->
	<header class="aui-navBar aui-navBar-fixed">
		<a href="/mobile/Index/invit" class="aui-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="aui-center">
			<span class="aui-center-title">邀请好友</span>
		</div>
	</header>

		<div class="container">
			<!--顶部logo-->
			<!--标语-->
			<div class="slogan">
				<img src="/yao/statics/images/slogan.png"/>
<!--				<a href="#">好友邀请你加入聆听商圈，寻找最安全的商机</a>-->
			</div>
			<!--邀请码-->
			<div class="invite">
				<div class="qrcode">
					<img  id="qrcode"/>

				</div>

				<div class="copy-code">
					<p>您的邀请码</p>
					<span id="yaoqingcode"></span>
					<a href="javascript:;" onclick="clipboard('2158hf')">复制连接</a>
				</div>
				<input type="hidden" id="url">
			</div>

			<!--活动详情-->
			<div class="activity">
				<ul>
					<li>
						<img src="/yao/statics/images/list-left-pic.png"/>
						<div class="info">
							<h5>分享好友</h5>
							<p class="desc">将邀请码分享给您的好友，好友进行app账户注册。</p>
						</div>
					</li>
					<li>
						<img src="/yao/statics/images/list-left-pic.png"/>
						<div class="info">
							<h5>到账现金</h5>
							<p class="desc">好友进行app账户商户认证后，即可得到现金红包。</p>
						</div>
					</li>
					<li>
						<img src="/yao/statics/images/list-left-pic.png"/>
						<div class="info">
							<h5>红包到账</h5>
							<p class="desc">成功邀请一名好友，现金将于2-3个小时内到账。</p>
						</div>
					</li>
				</ul>
			</div>
			 <uni-view class="tooltip">
                        <div class="tooltiptext" style="display: none"></div>
                    </uni-view>

<!--			<div class="btn-photo">保存到相册</div>-->

			<!--底部logo-->
<!--			<div class="logo-foot">-->
<!--				<img src="/yao/statics/images/logo-f.png"/>-->
<!--			</div>-->
		</div>
    
	</body>
<style>
	.btn-photo{
		display: inline-block;
		background: #6814cc;
		color: #FFFFFF;
		font-size: 18px;
		width: 100%;
		height: 30px;
		line-height: 30px;
		border-radius: .4rem;
		text-align: center;
		letter-spacing: .01rem;
		margin:0 auto
	}
	.tooltiptext {
    width: 50%;
    line-height: 30px;
    background-color: #A9A9A9;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    margin-left: 20%;
    top: 60%;
    font-size: 14px;

}
.tooltip{text-align: center}
	</style>
</html>
<script src='https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>

<script type="text/javascript">
    var inter;
	// 复制到剪切板
	function clipboard(data){
	    data=$("#url").val();
	    let f = document.createElement("form");
	    f.id = "copy-" + Date.parse(new Date());
	    f.onsubmit = function () { return false };
	    f.style = "opacity: 0;height: 1px;width: 1px;overflow: hidden;position:fixed;top: -1;left: -1;z-index: -1;"
	    f.innerHTML = `<button onclick='story.select();document.execCommand("Copy");'></button>
	        <textarea name="story">${data}</textarea>`;
	    document.body.appendChild(f);
	    document.querySelector('#' + f.id + '>button').click();
	    document.body.removeChild(document.getElementById(f.id));
	     $(".tooltiptext").text("复制成功")
        $(".tooltiptext").show();
        inter = setInterval("fun()", 2000);
	}
	function fun() {
            clearInterval(inter);
            $(".tooltiptext").hide();
            $(".tooltiptext").text("")
        
            }
	$.post('/mobile/Index/getuserinfo', {

	}, function (res) {
		console.log(res);
		var data = res.data;
		$("#qrcode").attr('src',data.img);
		$("#yaoqingcode").text(data.code);
		$("#url").val(data.url);

	}, 'json');

	function qrcode(qrCodeDiv,size,text)
	{
		var option = {
			render:'image',
			minVersion:1,
			maxVersion:40,
			ecLevel: 'L',
			minVersion:5,
			left:0,
			top:0,
			size:size,
			fill:'#000',
			background:'#fff',
			text: text,
			radius:0,
			quiet:0,
			mode:4,
			mSize:0.15,
			mPosX:0.5,
			mPosY:0.5,
			image:null
		}

		$(qrCodeDiv).qrcode(option);
	}
</script>